<template>
  <div class="min-h-screen bg-gradient-to-br from-tech-darker via-tech-dark to-tech-darker">
    <!-- 导航栏 -->
    <nav class="border-b border-gray-800 bg-tech-dark/50 backdrop-blur-sm sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <router-link to="/" class="flex items-center space-x-2">
            <div class="w-8 h-8 bg-gradient-to-r from-tech-accent to-tech-secondary rounded-lg flex items-center justify-center">
              <span class="text-white font-bold text-lg">M</span>
            </div>
            <span class="tech-text text-xl font-bold">MDN API 演示</span>
          </router-link>
          
          <div class="flex items-center space-x-4">
            <router-link 
              to="/" 
              class="text-gray-300 hover:text-tech-accent transition-colors duration-200"
            >
              首页
            </router-link>
            <a 
              href="https://developer.mozilla.org" 
              target="_blank"
              class="text-gray-300 hover:text-tech-accent transition-colors duration-200"
            >
              MDN 文档
            </a>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="flex-1">
      <router-view />
    </main>

    <!-- 页脚 -->
    <footer class="border-t border-gray-800 bg-tech-dark/30 mt-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="text-center text-gray-400">
          <p>&copy; 2025 MDN API 演示项目. 基于 Vue 3 + UnoCSS 构建</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
// App 组件逻辑
</script>
